<!DOCTYPE html>
<html lang="pt">
<head>
	<meta charset="utf8">
	<title>Example SlideShow with Unslider.min.js</title>
	<style type="text/css" rel="stylesheet">
	.banner {
		position: relative;
		overflow: auto;
    	width: 1024px;
    	height: 300px;
    	border: 1px solid #000;
    	margin: 20px;
	}
	.banner ul {
		margin: 0;
		padding: 0;
	}
    .banner li {
    	list-style: none;
    }
    .banner ul li {
    	float: left;
    	width: 1024px;
    	height: 300px;
    }
    .banner .dots {}
    .banner .dots .dot {}
    .banner .dots .active {}

    .banner .prev {
    	left: 10px;
    	background: url('arrow-right.png') center;
    }
    .banner .next {
    	right: 10px;
    	background: url('arrow-left.png') center;
    }

	.unslider-arrow {
		position: absolute;
		top: 125px;
		display: block;
		width: 50px;
		height: 50px;
		text-indent: -9999px;
	}

    /*  */
    #bnn-one {
    	background: #FF5E46;
    }
    #bnn-two {
    	background: #C8FF46;
    }
    #bnn-three {
    	background: #779BF9;
    }

	</style>
	<script type="text/javascript" src="../../js/jquery-1.11.1.min.js"></script>
	<script type="text/javascript" src="unslider.min.js"></script>
	<script type="text/javascript">
	$(document).ready(function() {
		//Banner One
		var bannerOne = $('.banner-one').unslider({
			// speed: 500,               //  The speed to animate each slide (in milliseconds)
			delay: 3000,                 //  The delay between slide animations (in milliseconds)
			// complete: function() {},  //  A function that gets called after every slide animation
			keys: true,                  //  Enable keyboard (left, right) arrow shortcuts
			// dots: true,               //  Display dot navigation
			// fluid: false              //  Support responsive design. May break non-responsive designs
		});
		$('.banner-one .unslider-arrow').click(function() {
        	var fn = this.className.split(/\s/)[1];
        	bannerOne.data('unslider')[fn]();
    	});
    	//data = unslider.data('unslider');

    	//Banner Two
    	var bannerTwo = $('.banner-two').unslider({
			// speed: 500,               //  The speed to animate each slide (in milliseconds)
			delay: 3000,                 //  The delay between slide animations (in milliseconds)
			// complete: function() {},  //  A function that gets called after every slide animation
			keys: true,                  //  Enable keyboard (left, right) arrow shortcuts
			// dots: true,               //  Display dot navigation
			// fluid: false              //  Support responsive design. May break non-responsive designs
			fade: true
		});
		$('.banner-two .unslider-arrow').click(function() {
        	var fn = this.className.split(/\s/)[1];
        	bannerTwo.data('unslider')[fn]();
    	});
	});
	</script>
</head>
<body>
	<div class="banner banner-one">
    	<ul>
        	<li id="bnn-one">This is a slide.</li>
        	<li id="bnn-two">This is another slide.</li>
        	<li id="bnn-three">This is a final slide.</li>
    	</ul>
    	<a href="#" class="unslider-arrow prev">Previous slide</a>
		<a href="#" class="unslider-arrow next">Next slide</a>
	</div>

	<div class="banner banner-two">
    	<ul>
        	<li id="bnn-one">This is a slide.</li>
        	<li id="bnn-two">This is another slide.</li>
        	<li id="bnn-three">This is a final slide.</li>
    	</ul>
    	<a href="#" class="unslider-arrow prev">Previous slide</a>
		<a href="#" class="unslider-arrow next">Next slide</a>
	</div>
</body>
</html>